<!-- jQuery and Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>

<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

<!-- Lightbox JS -->
<script src="https://cdn.jsdelivr.net/npm/lightbox2@2.11.3/dist/js/lightbox.min.js"></script>

<!-- Additional JS Libraries -->
<script src="//cdn.suruga-ya.jp/styles/js/lazysizes.min.js"></script>

<!-- Google Analytics and DataLayer -->
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_MEASUREMENT_ID');

// Custom dataLayer events
function htmlDecode(value) {
    return $('<div/>').html(value).text();
}
</script>

<!-- Flash Sale Countdown Timer -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Flash Sale Countdown
    if (typeof endtime_campaign !== 'undefined') {
        var countDownDate = new Date(endtime_campaign).getTime();
        
        var x = setInterval(function() {
            var now = new Date().getTime();
            var distance = countDownDate - now;
            
            if (distance > 0) {
                var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                var seconds = Math.floor((distance % (1000 * 60)) / 1000);
                
                document.querySelector('.hours').innerHTML = String(hours).padStart(2, '0');
                document.querySelector('.minutes').innerHTML = String(minutes).padStart(2, '0');
                document.querySelector('.seconds').innerHTML = String(seconds).padStart(2, '0');
            } else {
                clearInterval(x);
                document.querySelector('.flash_sale').style.display = 'none';
            }
        }, 1000);
    }
});
</script>

<!-- Sidebar Navigation -->
<script>
$(document).ready(function() {
    // Sidebar toggle
    $('#sidebarCollapse').on('click', function() {
        $('#sidebar_menu').toggleClass('active');
        $('.overlay').toggleClass('active');
    });
    
    // Close sidebar
    $('#dismiss, .overlay').on('click', function() {
        $('#sidebar_menu').removeClass('active');
        $('.overlay').removeClass('active');
    });
    
    // Sidebar collapse functionality
    $('.dropdown-toggle').on('click', function() {
        var target = $(this).data('target');
        $(target).collapse('toggle');
        
        // Toggle arrow direction
        $(this).toggleClass('collapsed');
    });
});
</script>

<!-- Product Image Gallery -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize Swiper for product thumbnails
    if (document.querySelector('.zoom_product_thumnail')) {
        window.swiperThumbnail = new Swiper('.zoom_product_thumnail', {
            slidesPerView: 4,
            spaceBetween: 5,
            loop: false,
            navigation: {
                nextEl: '.thumnail-swiper-button-next',
                prevEl: '.thumnail-swiper-button-prev',
            },
            breakpoints: {
                320: { slidesPerView: 2, spaceBetween: 5 },
                640: { slidesPerView: 3, spaceBetween: 5 },
                768: { slidesPerView: 4, spaceBetween: 5 },
            }
        });
    }
    
    // Image click handlers
    document.querySelectorAll('.main-pro-lightbox').forEach(function(link) {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            showImageZoom(this.href);
        });
    });
});
</script>

<!-- Search and Navigation -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Search form enhancement
    var searchForm = document.querySelector('.search-form-top');
    if (searchForm) {
        searchForm.addEventListener('submit', function(e) {
            var searchInput = this.querySelector('#txt-search');
            var categorySelect = this.querySelector('#cat-search');
            
            // Track search event
            dataLayer.push({
                'event': 'search',
                'eventCategory': 'site search',
                'eventAction': 'search',
                'eventLabel': searchInput.value,
                'searchCategory': categorySelect.value
            });
        });
    }
    
    // Auto-complete simulation
    var searchInput = document.querySelector('#txt-search');
    if (searchInput) {
        searchInput.addEventListener('input', function() {
            var query = this.value;
            if (query.length >= 3) {
                // 这里可以添加AJAX请求获取搜索建议
                console.log('Search suggestion for:', query);
            }
        });
    }
});
</script>

<!-- Notification System -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Load notifications
    loadNotifications();
    
    // Mark all as read
    document.querySelector('.read-all-message')?.addEventListener('click', function() {
        markAllNotificationsAsRead();
    });
});

function loadNotifications() {
    // 模拟加载通知
    var notifications = new Array(
        {
            id: 1,
            title: 'Order Shipped',
            message: 'Your order #12345 has been shipped!',
            time: '2 hours ago',
            read: false
        },
        {
            id: 2,
            title: 'New Arrivals',
            message: 'Check out our latest pool accessories!',
            time: '1 day ago',
            read: true
        }
    );
    
    var notificationList = document.querySelector('#messages');
    var notificationCount = document.querySelector('.lbl_count');
    
    if (notificationList && notificationCount) {
        var unreadCount = notifications.filter(n => !n.read).length;
        notificationCount.textContent = unreadCount;
        
        notificationList.innerHTML = notifications.map(notification => `
            <li class="notification-item ${notification.read ? 'read' : 'unread'}">
                <div class="notification-content">
                    <h6>${notification.title}</h6>
                    <p>${notification.message}</p>
                    <small>${notification.time}</small>
                </div>
            </li>
        `).join('');
    }
}

function markAllNotificationsAsRead() {
    document.querySelectorAll('.notification-item').forEach(function(item) {
        item.classList.remove('unread');
        item.classList.add('read');
    });
    document.querySelector('.lbl_count').textContent = '0';
}
</script>

<!-- Shopping Cart -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Load cart count
    updateCartCount();
    
    // Price change handlers
    document.querySelectorAll('input[name="grade"]').forEach(function(radio) {
        radio.addEventListener('change', function() {
            var zaiko = JSON.parse(this.dataset.zaiko);
            updatePrice(zaiko);
        });
    });
});

function updateCartCount() {
    // 模拟从服务器获取购物车数量
    var cartCount = localStorage.getItem('cartCount') || '0';
    document.querySelectorAll('.cart-number').forEach(function(element) {
        element.textContent = cartCount;
    });
}

function updatePrice(zaiko) {
    var priceElement = document.querySelector('.price-buy');
    var noteElement = document.querySelector('.product_note');
    
    if (priceElement && zaiko) {
        // 更新价格显示
        priceElement.textContent = '$' + zaiko.baika + ' (tax included)';
        
        // 更新库存状态
        var stockElement = document.querySelector('.tag_product.blue-light span');
        if (stockElement) {
            stockElement.textContent = 'Number of stocks: ' + zaiko.zaiko;
        }
    }
}

// Add to cart with animation
function addToCartWithAnimation() {
    var cartIcon = document.querySelector('.sidebar_cart');
    var productImage = document.querySelector('.main-pro-img');
    
    if (cartIcon && productImage) {
        // Create flying image effect
        var flyingImage = productImage.cloneNode(true);
        flyingImage.style.position = 'fixed';
        flyingImage.style.zIndex = '9999';
        flyingImage.style.width = '50px';
        flyingImage.style.height = '50px';
        flyingImage.style.transition = 'all 1s ease-in-out';
        
        document.body.appendChild(flyingImage);
        
        var productRect = productImage.getBoundingClientRect();
        var cartRect = cartIcon.getBoundingClientRect();
        
        flyingImage.style.left = productRect.left + 'px';
        flyingImage.style.top = productRect.top + 'px';
        
        setTimeout(function() {
            flyingImage.style.left = cartRect.left + 'px';
            flyingImage.style.top = cartRect.top + 'px';
            flyingImage.style.opacity = '0';
            flyingImage.style.transform = 'scale(0.1)';
        }, 100);
        
        setTimeout(function() {
            document.body.removeChild(flyingImage);
            
            // Update cart count
            var currentCount = parseInt(localStorage.getItem('cartCount') || '0');
            localStorage.setItem('cartCount', currentCount + 1);
            updateCartCount();
            
            // Show success message
            showMessage('Success', 'Item added to cart successfully!', 'success');
        }, 1100);
    }
}
</script>

<!-- Tweet Function -->
<script>
// Twitter share functionality
window.pages = {
    product_detail: {
        tweet: function(title, description, url, productUrl, width, height) {
            var tweetText = encodeURIComponent(title + ' ' + productUrl);
            var tweetUrl = 'https://twitter.com/intent/tweet?text=' + tweetText;
            
            window.open(tweetUrl, 'twitter-share', 'width=600,height=400');
            
            // Track social share
            dataLayer.push({
                'event': 'social_share',
                'eventCategory': 'social',
                'eventAction': 'twitter_share',
                'eventLabel': title
            });
        }
    }
};
</script>

<!-- Form Validation and Enhancement -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Form validation
    var forms = document.querySelectorAll('form');
    forms.forEach(function(form) {
        form.addEventListener('submit', function(e) {
            if (!validateForm(this)) {
                e.preventDefault();
            }
        });
    });
    
    // Input formatting
    var numberInputs = document.querySelectorAll('input[type="number"]');
    numberInputs.forEach(function(input) {
        input.addEventListener('input', function() {
            var value = parseInt(this.value);
            var min = parseInt(this.getAttribute('min')) || 1;
            var max = parseInt(this.getAttribute('max')) || 999;
            
            if (value < min) this.value = min;
            if (value > max) this.value = max;
        });
    });
});

function validateForm(form) {
    var isValid = true;
    var requiredFields = form.querySelectorAll('[required]');
    
    requiredFields.forEach(function(field) {
        if (!field.value.trim()) {
            field.classList.add('is-invalid');
            isValid = false;
        } else {
            field.classList.remove('is-invalid');
        }
    });
    
    return isValid;
}
</script>

<!-- Lazy Loading and Performance -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Lazy load images
    if ('IntersectionObserver' in window) {
        var imageObserver = new IntersectionObserver(function(entries, observer) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                    var img = entry.target;
                    if (img.dataset.src) {
                        img.src = img.dataset.src;
                        img.classList.add('loaded');
                        observer.unobserve(img);
                    }
                }
            });
        });
        
        document.querySelectorAll('img[data-src]').forEach(function(img) {
            imageObserver.observe(img);
        });
    }
    
    // Preload critical resources
    var criticalImages = new Array(
        '<?php echo isset($data['images'][0]) ? $data['images'][0] : ''; ?>',
        'https://cdn.suruga-ya.jp/pics/common/pc/user_black.svg',
        'https://cdn.suruga-ya.jp/pics/common/pc/cart_black.svg'
    ].filter(Boolean);
    
    criticalImages.forEach(function(src) {
        var link = document.createElement('link');
        link.rel = 'preload';
        link.as = 'image';
        link.href = src;
        document.head.appendChild(link);
    });
});
</script>

<!-- Error Handling -->
<script>
window.addEventListener('error', function(e) {
    console.error('JavaScript Error:', e.error);
    
    // Track errors
    if (typeof gtag === 'function') {
        gtag('event', 'exception', {
            'description': e.error.toString(),
            'fatal': false
        });
    }
});

window.addEventListener('unhandledrejection', function(e) {
    console.error('Unhandled Promise Rejection:', e.reason);
});
</script>

<!-- Accessibility Enhancements -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Keyboard navigation
    document.addEventListener('keydown', function(e) {
        // Escape key closes modals and menus
        if (e.key === 'Escape') {
            $('.modal').modal('hide');
            $('#sidebar_menu').removeClass('active');
            $('.overlay').removeClass('active');
        }
        
        // Tab navigation improvements
        if (e.key === 'Tab') {
            var focusableElements = document.querySelectorAll(
                'a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select'
            );
            
            // Add visual focus indicators
            document.addEventListener('focusin', function(e) {
                e.target.classList.add('keyboard-focused');
            });
            
            document.addEventListener('focusout', function(e) {
                e.target.classList.remove('keyboard-focused');
            });
        }
    });
    
    // ARIA labels and descriptions
    var buttons = document.querySelectorAll('button:not([aria-label])');
    buttons.forEach(function(button) {
        if (button.textContent.trim()) {
            button.setAttribute('aria-label', button.textContent.trim());
        }
    });
});
</script>

<!-- Custom Styles for Scripts -->
<style>
.keyboard-focused {
    outline: 2px solid #007bff !important;
    outline-offset: 2px !important;
}

.notification-item {
    padding: 10px;
    border-bottom: 1px solid #eee;
    transition: background-color 0.3s ease;
}

.notification-item:hover {
    background-color: #f8f9fa;
}

.notification-item.unread {
    background-color: #e3f2fd;
    border-left: 3px solid #2196f3;
}

.notification-item h6 {
    margin: 0 0 5px 0;
    font-size: 14px;
    font-weight: 600;
}

.notification-item p {
    margin: 0 0 5px 0;
    font-size: 13px;
    color: #666;
}

.notification-item small {
    color: #999;
    font-size: 11px;
}

.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

@keyframes flyToCart {
    to {
        transform: translateX(100px) translateY(-50px) scale(0.1);
        opacity: 0;
    }
}

.flying-to-cart {
    animation: flyToCart 1s ease-in-out forwards;
}

/* Loading states */
.loading {
    position: relative;
    pointer-events: none;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid transparent;
    border-top: 2px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Image loading states */
img[data-src]:not([src]) {
    opacity: 0;
    transition: opacity 0.3s ease;
}

img[data-src].loaded {
    opacity: 1;
}
</style>